<template>
  <div class="bar-box">
    <van-tabbar :fixed="false" v-model="active" route @change="handleChange" active-color="#004EFF" class="tabbar" >
      <van-tabbar-item class="tabItem" v-for="(item, index) in data" :key="index" :to="item.path" @click="tabItemClick(index)">
        <!-- <van-icon :class="`yun bar-icon ${item.icon}`" class-prefix="icon" slot="icon"></van-icon> -->
        <img slot="icon" slot-scope="props" :src="props.active? item.activeImg : item.img" alt="">
          <!-- <img :src="item.img" alt=""> -->
        <span> {{ item.title }}</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  name: 'TabBar',
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      active:0,
      currindex:0
    }
  },
  watch: {},
  mounted() {},
  methods: {
    handleChange(value) {
      this.$emit('change', value)
    },
    tabItemClick(index){
      this.currindex=index
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.bar-box {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  height: 100%;
}

.tabbar {
  // .van-tabbar-item--active {
  //   border-top: 6px solid #004eff !important;
  // }
  .van-tabbar-item {
    // border-top: 6px solid transparent;
    font-size: 26px !important;
    color: #000000;
    .bar-icon {
      font-size: 40px;
    }
  }
}

.tabItem{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  .van-tabbar-item__text{
    border: 1px solid red;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    &>img{
      width: 50px;
      height: 50px;
    }
  }
}
</style>
